<template>
    <view class="uni-popup-share">
        <view class="header flex align-center">
            <view class="text-xxl margin-lr padding-tb-sm"><text class="cuIcon-close" @click="close"></text></view>
            <view class="uni-share-title align-center padding-lr-sm"><text class="uni-share-title-text">{{title}}</text></view>
        </view>
        <view class="uni-share-content">
            <view class="uni-share-content-box">
                <view class="uni-share-content-item">
                    <text class="lg text-green cuIcon-camera" style="font-size: 100rpx;" @click="fromCamera"></text>
                    <text class="uni-share-text">相机</text>
                </view>
                <view class="uni-share-content-item">
                    <text class="lg text-green cuIcon-pic" style="font-size: 100rpx;" @click="fromAlbum"></text>
                    <text class="uni-share-text">文件</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'UniPopupShare',
    props: {
        title: {
            type: String,
            default: '选择操作'
        }
    },
    inject: ['popup'],
    data() { return {}; },
    created() {},
    methods: {
        /**
         * 选择内容
         */
        select(item, index) {
            this.$emit('select', {
                item,
                index
            }, () => {
                this.popup.close();
            });
        },
        /**
         * 关闭窗口
         */
        close() {
            this.popup.close();
        },
        fromCamera() {
            var that = this;
            uni.chooseImage({
                count: 1,
                sourceType: ['camera'],
                camera: 'back',
                success(res) {
                    that.$emit('imageready', {images: res.tempFilePaths});
                    that.popup.close();
                    /*
                     *uni.saveImageToPhotosAlbum({
                     *  filePath: res.tempFilePaths[0],
                     *  success: function() {
                     *      //console.log('保存成功');
                     *      that.$emit('imageready', {images: res.tempFilePaths});
                     *      that.popup.close();
                     *  }
                     *});
                     */
                }
            });
        },
        fromAlbum() {
            var that = this;
            uni.chooseImage({
                count: 9,
                sizeType: ['compressed'],
                sourceType: ['album'],
                success: function(res) {
                    that.$emit('imageready', {images: res.tempFilePaths});
                    that.popup.close();
                }
            });
        }
    }
};
</script>
<style lang="scss" scoped>
    .uni-popup-share {
        background-color: #fff;
    }
    .uni-share-title {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        align-items: center;
        justify-content: center;
        height: 40px;
    }
    .uni-share-title-text {
        font-size: 14px;
        color: #666;
        padding-left: 200rpx;
    }
    .uni-share-content {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        justify-content: space-evenly;
        padding-top: 10px;
    }

    .uni-share-content-box {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        flex-wrap: wrap;
        width: 360px;
    }

    .uni-share-content-item {
        width: 90px;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;
        justify-content: center;
        padding: 10px 0;
        align-items: center;
    }

    .uni-share-content-item:active {
        background-color: #f5f5f5;
    }

    .uni-share-text {
        margin-top: 10px;
        font-size: 14px;
        color: #3B4144;
    }
</style>
